<template lang="html">
    <div class="box">
          <el-form label-position="right" class="form" label-width="80px" :model="formLabelAlign">
              <el-form-item label="标题">
                  <el-input v-model="formLabelAlign.title"></el-input>
              </el-form-item>
              <el-form-item label="内容">
                  <Tinymce id='newMsg' v-model='formLabelAlign.content'></Tinymce>
                  <!-- <el-input type="textarea" v-model="formLabelAlign.content"></el-input> -->
              </el-form-item>
              <el-form-item label="发送对象">
                  <el-select v-model="formLabelAlign.sendto" multiple placeholder="请选择发送对象">
                      <el-option v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.id"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="submitForm">确定</el-button>
              </el-form-item>
          </el-form>
      </div>
</template>

<script>
import Tinymce from '@/components/Tinymce/Tinymce/index'
export default {
  data () {
    return {
      formLabelAlign: {
        title: '',
        content: '',
        sendto: []
      },
      typeList: [],

    }
  },
  components: { Tinymce },
  created () {
    this.sendto()
  },
  methods: {


    submitForm () {
      if (this.formLabelAlign.title == '' || this.formLabelAlign.content == '' || this.formLabelAlign.sendto.length == 0) {
        this.$message.error('请完善信息!')
        return false;
      }
      this.$http4.addMsg(this.formLabelAlign).then(res => {
        if (res.data.code == 1) {
          this.$message.success(res.data.msg)
          this.$nextTick(() => {
            this.formLabelAlign = Object.assign({}, { title: '', content: '', sendto: [] })
          })

        } else {
          this.$message.error(res.data.msg)
        }

      })
    },

    sendto () {
      this.$http4.sendto().then(res => {
        this.typeList = res.data
      })
    }

  }
}
</script>

<style lang="css" scoped>
@import "../../my-style/app.css";

.form {
  width: 45%;
}

.el-select {
  width: 100%;
}
</style>
